<template>
	<view class="orderDetails">
		<!-- 提示信息 -->
		<view v-if="orderStatus==3" style="position: absolute;
		top: 0;
		left: 0;
		width: 100%;
			padding: 10rpx 0;
			font-size:26rpx;
			background: #e6a23c;
			color: #FFF;
			display: flex;
			align-items: center;
			justify-content: center;
			">
			请及时确认生产，否则影响打款
		</view>
		<!-- 订单信息 -->
		<view :style="{marginTop:orderStatus==3?'60rpx':'25rpx'}" class="cardStyle">
			<image class="borderStyle" src="@/static/images/半圆.png" mode=""></image>
			<view style="font-size: 34rpx;font-weight: bold; margin-bottom: 30rpx;">
				{{orderItem.addres||'--'}}
			</view>
			<view class="cardItemStyle">
				创建时间： {{timestampToTime_M(orderItem.create_time)||'--'}}
			</view>
			<view class="cardItemStyle" @click="callup(orderItem.mobile)">
				<view>
					<text>益鸟店长：{{orderItem.username||'--'}}</text>
					<text style="color: #179332;text-decoration:underline;">{{orderItem.mobile||'--'}}</text>
				</view>
				<image style="width: 40rpx;height: 40rpx;" src="../../static/images/电话.png" mode=""></image>
			</view>
			<view class="cardItemStyle" @click="callup(orderItem.admin_mobile)">
				<view>
					<text>益鸟设计师：{{orderItem.admin_name||'--'}}</text>
					<text style="color: #179332;text-decoration:underline;">{{orderItem.admin_mobile||'--'}}</text>
				</view>
				<image style="width: 40rpx;height: 40rpx;" src="../../static/images/电话.png" mode=""></image>
			</view>
			<view class="cardItemStyle" @click="copy(orderItem.agency_order_on)">
				<view>
					<text>主材单号：{{orderItem.agency_order_on}}</text>
				</view>
				<image style="width: 40rpx;height: 40rpx;" src="../../static/images/复制.png" mode=""></image>
			</view>
			<view class="cardItemStyle">
				产品清单：共计{{orderItem.num||'--'}}项
			</view>
			<view style="color: #d43f46;font-size: 24rpx;" v-if="orderItem.rejection_reason">
				<view>被供应链驳回，需要你根据驳回原因再次操作!</view>
				<view>驳回原因：{{orderItem.rejection_reason}}</view>
			</view>
		</view>
		<!-- 时间进度 -->
		<view class="remarksStyle">
			<view style="font-size: 34rpx;font-weight: 700;">
				需求备注及时间要求：
			</view>
			<view class="textStyle">
				{{onther.remark||'--'}}
			</view>
			<view class="ProgressCircle">
				<view class="noe">
					<view class="imgStyle">
						<image style="width: 120rpx;height: 120rpx;"
							:src="onther.generation_time&&onther.scheduling_confirm_time?'../../static/images/Slice6.png':'../../static/images/Slice5.png'"
							mode="">
						</image>
						<view class="Circle_text">
							<text>确认</text>
							<text>阶段</text>
						</view>
						<view class="arrowStyle">
							<image style="width: 120rpx;height: 30rpx;"
								:src="onther.generation_time&&onther.scheduling_confirm_time?'../../static/images/Slice4.png':'../../static/images/Slice2.png'"
								mode="">
							</image>
						</view>
						<view class="time_text1">
							<text
								v-if="onther.generation_time">{{`预计${timestampToTime_D(onther.generation_time)}前完成`}}</text>
							<text v-else>暂无预计时间</text>
						</view>
						<view class="time_text2">
							<text
								v-if="onther.scheduling_confirm_time">{{`实际${timestampToTime_D(onther.scheduling_confirm_time)}完成`}}</text>
							<text v-else>暂无实际时间</text>
						</view>
					</view>
				</view>
				<view class="noe">
					<view class="imgStyle">
						<image style="width: 120rpx;height: 120rpx;"
							:src="onther.generation_completion_time&&onther.deliverable_time?'../../static/images/Slice6.png':'../../static/images/Slice5.png'"
							mode="">
						</image>

						<view class="Circle_text">
							<text>配送</text>
							<text>时间</text>
						</view>
						<view class="arrowStyle">
							<image style="width: 120rpx;height: 30rpx;"
								:src="onther.generation_completion_time&&onther.deliverable_time?'../../static/images/Slice4.png':'../../static/images/Slice2.png'"
								mode="">
							</image>
						</view>
						<view class="time_text1">
							<text
								v-if="onther.generation_completion_time">{{`预计${timestampToTime_D(onther.generation_completion_time)}前完成`}}</text>
							<text v-else>暂无预计时间</text>
						</view>
						<view class="time_text2">
							<text
								v-if="onther.deliverable_time">{{`实际${timestampToTime_D(onther.deliverable_time)}完成`}}</text>
							<text v-else>暂无实际时间</text>
						</view>

					</view>
				</view>
				<view class="noe">
					<view class="imgStyle">
						<image style="width: 120rpx;height: 120rpx;"
							:src="onther.installation_time&&onther.completion_time?'../../static/images/Slice6.png':'../../static/images/Slice5.png'"
							mode="">
						</image>
						<view class="Circle_text">
							<text>安装</text>
							<text>时间</text>
						</view>

						<view class="time_text1">
							<text
								v-if="onther.installation_time">{{`预计${timestampToTime_D(onther.installation_time)}前完成`}}</text>
							<text v-else>暂无预计时间</text>
						</view>
						<view class="time_text2">
							<text
								v-if="onther.completion_time">{{`实际${timestampToTime_D(onther.completion_time)}完成`}}</text>
							<text v-else>暂无实际时间</text>
						</view>
					</view>
				</view>

			</view>

		</view>
		<!-- 产品清单 -->
		<view class="flex_between">
			<text style="font-size: 34rpx; font-weight: bold;">产品清单</text>
			<text
				style="font-size: 34rpx;font-weight: bold;color: #007742;">总报价:{{Math.floor(TotalQuotation*100)/100||'0.00'}}元</text>
		</view>
		<!-- 展开收起 -->
		<view class="inventoryList">
			<!-- 展开 -->
			<view class="flex_center" @click="openList" v-if="inventoryIndex">
				<view style="font-size: 24rpx;margin-right: 10rpx;margin-top: 10rpx;"> 展开</view>
				<view class="triangle1"></view>
			</view>
			<!-- 收起 -->
			<view class="putawayList" v-if="!inventoryIndex">
				<view class="itemStyle" v-for="(item,index) in inventory" :key="index">
					<view style="font-size: 28rpx;font-weight: bold;margin-right: 20rpx;">
						{{`项目${index+1}:`}}
					</view>
					<view class="item">
						<text style="font-size: 28rpx;font-weight: bold;">{{item.class_b||'--'}}</text>
						<text style="word-break: break-all;">{{item.title||'--'}}</text>
						<text
							style="word-break: break-all;margin: 10rpx 0">{{`备注：${item.agency_task_spec||'--'}`}}</text>
						<view class="flex_between">
							<text>{{`总方量：${item.square||'--'}${item.company||'--'}`}}</text>
							<text style="font-weight: bold;">{{`结算价：${item.total_cost||'0.00'}元`}}</text>
						</view>
					</view>
				</view>
				<view style="margin-top: 20rpx;" class="flex_center" @click="putawayList">
					<view style="font-size: 24rpx;margin-right: 10rpx;margin-bottom: 10rpx;">收起</view>
					<view class="triangle2"></view>
				</view>
			</view>
		</view>
		<!-- 附件资料 -->
		<view>
			<view style="font-size: 34rpx; font-weight: bold;">附件资料</view>
			<view style="width: 100%;display: flex; flex-wrap: wrap;">
				<!-- 图片 -->
				<view class="flex_cloumn" style="width: 140rpx;margin: 10rpx 15rpx;" v-for="(ItemImg,index) in annexImg"
					:key="index">
					<image style="width: 140rpx;height: 140rpx;" :src="ItemImg.url" mode=""
						@click="previewpictures(ItemImg.url)">
					</image>
					<view class="flex_center" style="font-size: 24rpx;">
						{{ItemImg.title}}
					</view>
				</view>
				<!-- 压缩文件 -->
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: space-between;"
					v-for="(ItemFile,index) in annexZipFile" :key="index">
					<image style="width: 100rpx;height: 100rpx;" src="@/static/images/压缩文件.png" mode=""></image>
					<button type="primary" size="mini" @click="jumpUpload(ItemFile.url)">文件下载</button>
				</view>
			</view>
			<view v-if="orderStatus==2" @click="glassShowHide=true"
				style="font-size: 24rpx;color:#007641;text-decoration:underline">
				如果您上传的资料有误，点击这里可以补充或编辑已上传资料</view>
		</view>
		<!-- 底部确认按钮 ----------------------------------->
		<!-- 确认需求及价格 -->
		<view class="btnStyleBox">
			<view v-if="orderStatus!=2&&orderStatus!=6&&orderStatus!=7" class="btnStyle" @click="glassShowHide=true">
				<text>{{detailsbuttonTitle1}}</text>
				<text style="font-size: 22rpx;">{{detailsbuttonTitle2}}</text>
			</view>
			<view v-if="orderStatus==2" class="btnStyle1">
				<text>{{detailsbuttonTitle1}}</text>
				<text style="font-size: 22rpx;">{{detailsbuttonTitle2}}</text>
			</view>
			<view v-if="orderStatus==6&&!onther.send_msg_time" class="btnStyle2" @click="ReminderAcceptance">
				<text>{{detailsbuttonTitle1}}</text>
				<text style="font-size: 22rpx;">{{detailsbuttonTitle2}}</text>
			</view>
		</view>
		<!-- 需求确认 组件 -->
		<my-obscured-glass :ShowHidden="glassShowHide" :Title="confirmTitle" :Content="Content" :detailsList="inventory"
			@cancelEvent1="canceEvent1" @confirmEvent1="confirmEvent1" @addImg="addImg" @deletImg="deletImg($event)"
			@checkedChange="checkedChange($event)"></my-obscured-glass>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onHide,
		onLaunch,
		onShow
	} from '@dcloudio/uni-app';

	import {
		ref
	} from 'vue';

	import {
		timestampToTime_M,
		timestampToTime_D,
	} from "@/utils/date.js"; // 引入工具函数时间格式转化
	// 自定义二次确认弹框
	import myObscuredGlass from '@/components/my-obscuredGlass/my-obscuredGlass.vue'

	import {
		SCM_scmDetails,
		SCM_scmprod,
		SCM_scmDone,
		SCM_save_deliverable_completion,
		SCM_save_sure_price,
		SCM_send_msg,
		SCM_save_image
	} from '@/api/api.js' //引入api接口
	import {
		ossUpload
	} from '@/js_sdk/jason-alioss-upload/oss.js'

	const orderStatus = ref('') //订单状态
	const orderItem = ref({}) //订单详情
	const orderId = ref('') //订单id

	const inventory = ref([]) // 清单详情
	const onther = ref({}) // 清单其他内容
	const TotalQuotation = ref(0) // 清单总价
	const cooperation_type = ref(null) // 当前订单是否自营还是非自营 1: 自营 2:非自营
	const annexImg = ref([]) // 附件图片
	const annexZipFile = ref([]) // 压缩文件
	const detailsbuttonTitle1 = ref('') // 底部确认按钮title1
	const detailsbuttonTitle2 = ref('') // 底部确认按钮title2

	const confirmTitle = ref('')
	const glassShowHide = ref(false) //确认 弹框
	const Content = ref({}) // 弹框组件需要的数据

	const attachmentImg = ref([]) //供应商上传
	const attachment_orderImg = ref([]) //设计师上传

	onLoad((params) => {
		orderStatus.value = params.orderStatus
		orderItem.value = JSON.parse(params.orderItem)
		orderId.value = JSON.parse(params.orderItem).id
	})
	onShow(() => {
		//获取订单详情
		orderDetails()
	})


	// 订单详情---------------
	const orderDetails = async () => {
		let params = {
			id: orderId.value
		}
		const res = await SCM_scmDetails(params)
		TotalQuotation.value = 0
		console.log('订单详情', res);
		if (res && res.code == 0) {
			orderStatus.value = res.data.other.status //订单状态
			inventory.value = res.data.detail
			onther.value = res.data.other

			let fileList = []
			annexImg.value = []
			attachmentImg.value = []
			attachment_orderImg.value = []
			annexZipFile.value = []

			attachmentImg.value = res.data.other.attachment && JSON.parse(res.data.other.attachment) || []
			attachment_orderImg.value = res.data.other.attachment_order && JSON.parse(res.data.other
				.attachment_order) || []
			fileList = attachmentImg.value.concat(attachment_orderImg.value)
			fileList && fileList.forEach((item) => {
				if (item.url.substring(item.url.length - 3) == 'zip' || item.url.substring(item.url
						.length - 3) == '7Z' ||
					item.url.substring(item.url.length - 3) == 'rar') {
					annexZipFile.value.push(item)
				} else {
					annexImg.value.push(item)
				}
			})
			// console.log('annexImg.value', annexImg.value);
			// console.log('annexZipFile.value', annexZipFile.value);
			res.data.detail && res.data.detail.forEach((item, index) => {
				TotalQuotation.value += +item.total_cost
				if (item.cooperation_type == 1) {
					cooperation_type.value = 1
				} else {
					cooperation_type.value = 2
				}
			})

			// 根据状态更改底部确认信息
			if (orderStatus.value == 1) {
				detailsbuttonTitle1.value = '确认需求及价格'
				detailsbuttonTitle2.value = ''
				confirmTitle.value = '确认需求'
			} else if (orderStatus.value == 2) {
				detailsbuttonTitle1.value = ''
				detailsbuttonTitle2.value =
					`您在${timestampToTime_M( res.data.other.agency_confirm_time)}已完成确认，待益鸟确认中`
				confirmTitle.value = '修改附件资料'
			} else if (orderStatus.value == 3) {
				detailsbuttonTitle1.value = '确认生产'
				detailsbuttonTitle2.value = '确认后将自动生成首款付款申请'
				confirmTitle.value = '确认生产'
			} else if (orderStatus.value == 4) {
				detailsbuttonTitle1.value = '生产完成可配送'
				detailsbuttonTitle2.value = '确认后将安排配送'
				confirmTitle.value = '确认生产或备货完成，产品处于可配送状态'
			} else if (orderStatus.value == 5) {
				detailsbuttonTitle1.value = '配送完成'
				detailsbuttonTitle2.value = '确认后将进入验收环节，验收后生成尾款付款申请'
				confirmTitle.value = '配送完成'
			} else if (orderStatus.value == 6) {
				detailsbuttonTitle1.value = '催单验收'
				detailsbuttonTitle2.value = ''
			}
			glassShowHide.value = false //确认弹框关闭

			// 弹框组件需要的数据
			Content.value.totaPrice = TotalQuotation.value //总价
			Content.value.id = onther.value.id //供应链子订单id
			Content.value.num = orderItem.value.num //清单数量
			Content.value.storeName = orderItem.value.username //店长姓名
			Content.value.storeMobile = orderItem.value.mobile //店长电话
			Content.value.adminName = orderItem.value.admin_name //设计师姓名
			Content.value.adminMobile = orderItem.value.admin_mobile //设计师电话
			Content.value.generation_completion_time = onther.value.generation_completion_time //预计配送时间
			Content.value.installation_time = onther.value.installation_time //预计安装时间
			Content.value.cooperation_type = cooperation_type.value //自营主材
			Content.value.annexImg = annexImg.value //图片素材
			Content.value.orderStatus = onther.value.status //图片素材
			Content.value.checked = true //默认选择配送完成
		}
	}


	// 点击拨打电话
	const callup = (tel) => {
		if (tel) {
			uni.makePhoneCall({
				phoneNumber: tel //仅为示例
			});
		}
	}
	// 点击复制
	const copy = (text) => {
		uni.setClipboardData({
			data: text,
			success: function() {
				uni.showToast({
					title: '复制成功',
					duration: 2000,
					mask: true
				})
			}
		});
	}

	const inventoryIndex = ref(true) //展开收起
	// 展开清单
	const openList = () => {
		inventoryIndex.value = false
	}
	// 收起清单
	const putawayList = () => {
		inventoryIndex.value = true
	}
	// 预览图片
	const previewpictures = (ItemImg) => {
		uni.previewImage({
			urls: [ItemImg],
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function(data) {},
				fail: function(err) {}
			}
		});
	}
	// 下载压缩文件
	const jumpUpload = (url) => {
		window.location.href = url
	}
	// 弹框 取消
	const canceEvent1 = () => {
		//获取订单详情
		orderDetails()
	}
	// 弹框 确认
	const confirmEvent1 = async () => {
		// 确认需求 ------
		if (orderStatus.value == 1) {
			// 若非自营主材，供应商需要至少提交一张图片
			if (cooperation_type.value == 2 && attachmentImg.value.length < 1) {
				return uni.showToast({
					title: '非自营主材，需要至少提交一张图片',
					icon: 'error',
					mask: true
				})
			}
			console.log('attachmentImg.value', attachmentImg.value);
			let params = {
				id: onther.value.id, //供应链子订单id
				aoid: onther.value.aoid, //供应链订单id
				attachment: JSON.stringify(attachmentImg.value), //材料附件图片
				list: [] //清单价格
			}
			const res = await SCM_save_sure_price(params)
			if (res && res.code == 0) {
				setTimeout(() => {
					uni.showToast({
						title: '操作成功',
						mask: true
					})
				})
				//获取订单详情
				orderDetails()
			}
		}
		// 补充附件资料
		if (orderStatus.value == 2) {
			// 若非自营主材，供应商需要至少提交一张图片
			if (cooperation_type.value == 2 && attachmentImg.value.length < 1) {
				return uni.showToast({
					title: '非自营主材，需要至少提交一张图片',
					icon: 'error',
					mask: true
				})
			}
			console.log('attachmentImg.value', attachmentImg.value);
			let params = {
				id: onther.value.id, //供应链子订单id
				aoid: onther.value.aoid, //供应链订单id
				attachment: JSON.stringify(attachmentImg.value), //材料附件图片
			}
			const res = await SCM_save_image(params)
			if (res && res.code == 0) {
				setTimeout(() => {
					uni.showToast({
						title: '操作成功',
						mask: true
					})
				})
				//获取订单详情
				orderDetails()
			}
		}
		// 确认生产------
		if (orderStatus.value == 3) {
			let params = {
				id: onther.value.id, //供应链子订单id
			}
			const res = await SCM_scmprod(params)
			if (res && res.code == 0) {
				setTimeout(() => {
					uni.showToast({
						title: '操作成功',
						mask: true
					})
				})
				//获取订单详情
				orderDetails()
			}
		}
		// 生产完成可配送------
		if (orderStatus.value == 4) {
			let sendstate = 0
			if (Content.value.checked) {
				sendstate = 1
			} else {
				sendstate = 0
			}
			let params = {
				id: onther.value.id, //供应链子订单id
				send: sendstate //0 未配送 1 已配送
			}
			const res = await SCM_scmDone(params)
			if (res && res.code == 0) {
				setTimeout(() => {
					uni.showToast({
						title: '操作成功',
						mask: true
					})
				})
				//获取订单详情
				orderDetails()
			}
		}
		// 配送完成------
		if (orderStatus.value == 5) {
			let params = {
				id: onther.value.id, //供应链子订单id
			}
			const res = await SCM_save_deliverable_completion(params)
			if (res && res.code == 0) {
				setTimeout(() => {
					uni.showToast({
						title: '操作成功',
						mask: true
					})
				})
				//获取订单详情
				orderDetails()
			}
		}

	}
	//  催单验收 发送短信
	const ReminderAcceptance = async () => {
		console.log('	orderItem.value', orderItem.value);
		let params = {
			mobile: orderItem.value.mobile, //店长电话
			addres: orderItem.value.addres, //地址
			id: orderItem.value.id //列表id
		}
		const res = await SCM_send_msg(params)
		if (res.code == 0) {
			setTimeout(() => {
				uni.showToast({
					title: '操作成功',
					mask: true
				})
			})
			//获取订单详情
			orderDetails()
		}
	}
	// 删除图片
	const deletImg = (index) => {
		attachmentImg.value.splice(index, 1);
		Content.value.annexImg.splice(index, 1);
	}
	// 上传图片 直接上传到阿里云
	const addImg = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], //从相册或者拍照选择,
			success: async (file) => {
				uni.showLoading({
					mask: true,
					title: '正在上传...'
				})
				const {
					success,
					data
				} = await ossUpload(file.tempFilePaths[0], file.tempFiles[0].name, 'img/')
				if (success) {
					console.log('阿里云oss返回', data);
					uni.hideLoading()
					let src = {
						title: '供应商上传',
						url: data
					}
					attachmentImg.value.push(src)
					Content.value.annexImg.push(src)
				} else {
					uni.showToast({
						icon: 'none',
						title: '上传失败'
					})
				}
			}
		})
	}

	// 是否已配送
	const checkedChange = (e) => {
		Content.value.checked = e
	}
</script>

<style lang="scss" scoped>
	.orderDetails {
		width: 100%;
		height: 100%;
		padding: 0 30rpx;
		margin-bottom: 180rpx;

		// 订单信息
		.cardStyle {
			position: relative;
			box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(76, 99, 78, 0.2);
			border-radius: 30rpx;
			background: #FFF;
			margin: 25rpx 0;
			padding: 20rpx;

			.borderStyle {
				position: absolute;
				top: 0;
				left: 0;
				width: 30rpx;
				height: 30rpx;
			}

			.cardItemStyle {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}

			.confirm {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10rpx 20rpx;
				background: #007B46;
				border-radius: 41rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFF;
			}
		}

		// 时间进度
		.remarksStyle {
			box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(76, 99, 78, 0.2);
			border-radius: 30rpx;
			background: #FFF;
			margin: 25rpx 0;
			padding: 30rpx;

			.textStyle {
				font-size: 24rpx;
				margin: 20rpx 0;
				padding: 20rpx 0;
				padding-top: 0;
				margin-top: 10rpx;
				border-bottom: 1px dashed #AAA;
			}

			.ProgressCircle {
				margin-top: 50rpx;
				margin-bottom: 200rpx;
				display: flex;
				justify-content: space-between;

				.noe {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.imgStyle {
						position: relative;
						width: 120rpx;
						height: 120rpx;

						.Circle_text {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							font-size: 28rpx;
							font-weight: 500;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

						}

						.arrowStyle {
							position: absolute;
							top: 40rpx;
							left: 100%;
						}

						.time_text1 {
							margin-top: 5rpx;
							font-size: 20rpx;
							width: 150rpx;
							color: #666;
							position: absolute;
							top: 105%;
						}

						.time_text2 {
							margin-top: 5rpx;
							font-size: 20rpx;
							width: 150rpx;
							position: absolute;
							top: 190%;
							color: #007B46;
						}
					}
				}
			}
		}

		// 产品清单
		.inventoryList {
			margin: 20rpx 0;
			padding: 10rpx 20rpx;
			background: linear-gradient(180deg, rgba(23, 147, 50, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.25);
			border-radius: 30rpx;


			.triangle1 {
				width: 15rpx;
				height: 15rpx;
				border-top: 2rpx solid #262626;
				border-left: 2rpx solid #262626;
				transform: rotate(-135deg);
			}

			.putawayList {
				.triangle2 {
					width: 15rpx;
					height: 15rpx;
					border-top: 2rpx solid #262626;
					border-left: 2rpx solid #262626;
					transform: rotate(45deg);
				}

				.itemStyle {
					margin-top: 10rpx;
					padding: 10rpx 0;
					display: flex;
					border-bottom: 1rpx solid rgba(0, 123, 70, 0.16);

					.item {
						width: 80%;
						font-size: 26rpx;
						display: flex;
						flex-direction: column;
					}
				}
			}
		}

		.btnStyleBox {
			position: fixed;
			bottom: 0;
			left: 50%;
			transform: translate(-50%);
			background: #FFF;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
		}

		// 确认按钮
		.btnStyle {
			width: 85%;
			margin: 20rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 25rpx;
			background: #007B46;
			border-radius: 70rpx;
			color: #FFF;
			font-size: 34rpx;
			font-weight: 700;
		}

		.btnStyle1 {
			width: 85%;
			margin: 20rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 25rpx;
			background: #ccc;
			border-radius: 70rpx;
			color: #f60000;
			font-size: 34rpx;
			font-weight: 700;
		}

		.btnStyle2 {
			width: 85%;
			margin: 20rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 25rpx;
			background: #007B46;
			border-radius: 70rpx;
			color: #FFF;
			font-size: 34rpx;
			font-weight: 700;
		}
	}
</style>